﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>

<div id="obStreetName" >
<select data-bind="options: availableStreetName, 
                   optionsCaption:'Please select...',
                   optionsText: 'StreetName1',
                   optionsValue: 'StreetName_ID'
                   " class="validate[required] chz hide" id="vmStreetName" name="StreetName"></select> 
 <%  string ControllerName = Html.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString();
     if (ControllerName == "ProjectDirectoryLocal" || ControllerName == "ProjectDirectoryInt")
     {
     %>
     <div class="add_more"> <a  class="icons icon-plus"></a> <a href="#ftemplate"  id="fancyStreet"> Add Street Name </a></div>
     <%}     
 %>
 
 <div id="ftemplate" style="display:none;min-height:230px;">
        <h2>
        
      <table class="tpl_table">
            <caption>New Street Name</caption>
            <tr>
                <td><span>English Name <font class="mandate">( * )</font></span> 
                
                <input type="text" id="koProjectName" class="inp-form require" data-bind="value:streetName" size="50"/>
               
                </td>
            </tr>
            <tr>
                <td><span>Local Name <font class="mandate">( * )</font> </span>
                <input type="text" id="koProjectNameCN"  data-bind="value:streetNameCN" class="inp-form require"  size="50"/></td>
            </tr>
            <tr>
                <td style="padding-top:8px;text-align:center"><input type="button" class="buttons"  value="Save" id="koSave" data-bind="click:Save" style="float:none;display:inline;margin-right:0;"/>
        <input type="button" data-bind="click:cancel" style="float:none;display:inline;margin-right:0;"  class="buttons" value="Cancel"  />
     </td>
            </tr>
        </table>
      </h2>
        
    
 </div>
 </div>
<script type="text/javascript">
    $(document).ready(function() {
    //Validate
       $(".require").blur(function() {
            if($(this).val()!=""){
                $(this).removeClass("error");
            }
        });
        var TypeProjectName = "INTERNATIONAL";
        <% if(ControllerName=="Property" || ControllerName=="Project" ){ %>
            TypeProjectName = "LOCAL";
       <%} %>
    //Begin Data
         var selected = "";
        <% if(Model.ToString()!=""){
         %>
            selected = <%=Model.ToString()%>;
         <%}  %>
          //
           $("#fancyStreet").fancybox({
            'modal': true,
           'beforeShow':function(){
                 $(".require").removeClass("error");
                 $("#koProjectName").val("");
                 $("#koProjectNameCN").val("");
           }});
           
        System.Data.StreetNameModel = function() {
            var self = this;
            //
            self.StreetnameID = ko.observable('');
            self.streetName = ko.observable('');
            self.streetNameCN = ko.observable('');
            //check
            self.checkexist = ko.dependentObservable(function () {
                if(self.streetName().length > 0){
                    return "Checking";
                }
                return "";
            });
            self.availableStreetName = ko.observableArray([]);
            self.selected = ko.observableArray([]);
            //cancle
            self.cancel = function(){
                $.fancybox.close();
            };
            //save
            self.Save = function(){
                var checkvalidate = true;
                 $(".require").each(function() {
                      if($(this).val() ==""){
                         checkvalidate = false;
                         $(this).addClass("error");
                      }
                 });
                 if(checkvalidate){
                    var dataObj = { ID : self.StreetnameID(),
                                    streetName:self.streetName(),
                                    streetNameCN:self.streetNameCN()}
                    var data = ko.toJSON(dataObj);
                    //
                     $.ajax({
                            type: "POST",
                            cache: false,
                            url: BASE_URL + "Listings/Ajax/CreateStreetName",
                            data: data,
                            contentType: 'application/json',
                            success: function(ID) {
                                                          
                                 self.availableStreetName.push({"StreetName_ID":ID,"StreetName1":self.streetName()});
                                 selected = ID;
                                 $("#vmStreetName").trigger("liszt:updated")
                                 if(selected !=""){
                                       
                                        $("#vmStreetName").val(selected).trigger("liszt:updated");
                                  }
                                
                                    jSuccess(
		                                '<div class="msgnotify"><b>Save successfully</b></div>',
		                                {
		                                    autoHide: true, // added in v2.0
		                                    HorizontalPosition: 'right',
		                                    VerticalPosition: 'top'
		                                });   
                                     
                                $.fancybox.close();
                              
                            }
                    });
                 }
              
              
            }
            self.loadStreetName = function() {
                $.getJSON(BASE_URL + "Listings/Ajax/GetStreetName/"+TypeProjectName, function(result) {
                    self.availableStreetName(result.Data);
                   
                    $("#vmStreetName").chosen({
                        allow_single_deselect: true
                    });
                     if(selected !=""){
                           
                            $("#vmStreetName").val(selected).trigger("liszt:updated");
                      }
                    $("#vmStreetName").removeClass("hide");
                });


               
            };
        }
        //Fill Data
        var vmStreetName = new System.Data.StreetNameModel();
        vmStreetName.loadStreetName();
        ko.applyBindings(vmStreetName, $("#obStreetName")[0]);
    });

</script>